<template>
  <div style="display: flex; flex-direction: column">
    <div
      style="
        width: 250px;
        background: purple;
        color: white;
        height: 20px;
        text-align: center;
        line-height: 20px;
        padding: 5px 0;
      "
    >
      Branch
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 190px;
        align-items: center;
        justify-content: center;
        background: black;
        color:white;
      "
    >
      <div style="display: flex; align-items: center">
        
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;
           overflow:hidden;
            margin-left:10px;
          "
          
        >{{instructionData}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IfElseComponent",
  inject: ["getNode"],
  data() {
    return {
      instructionData: null,
      eventType: 11,
    };
  },
  mounted() {
    const self = this;
    const node = this.getNode();
    node.on("change:data", ({ current }) => {
      
      if (current === undefined) {
        self.instructionData = null;
        return;
      }
      self.instructionData = current.instructionData;
    });
  },
};
</script>

<style>
</style>